<template>
  <div class="dashed-line">
    <div class="dashed-line__content">
      <div
        v-for="(item, index) in options"
        :key="index"
        class="dashed-line__item"
      >
        <div v-show="item.value === active" class="dashed-line__item-arrow">
          <span class="dashed-line__item-arrow-item"></span>
        </div>
        <div
          :style="{ '--color': item.color }"
          :class="[item.value === active && 'is-active']"
          class="dashed-line__item-progress"
        ></div>
      </div>
    </div>
    <div :style="{ justifyContent: labelAlign }" class="dashed-line__label">
      {{ activeLabel }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ColdRiskLevelEnum } from "@/constants/index";
import { computed } from "vue";

const options = [
  { label: "低风险", color: "#0DC98B", value: ColdRiskLevelEnum.LOW },
  { label: "轻微风险", color: "#1AA1E6", value: ColdRiskLevelEnum.MILD },
  { label: "中等风险", color: "#FED338", value: ColdRiskLevelEnum.MODERATE },
  { label: "较高风险", color: "#FF9D21", value: ColdRiskLevelEnum.HIGH },
  { label: "高风险", color: "#FF5A5A", value: ColdRiskLevelEnum.VERY_HIGH },
];

withDefaults(
  defineProps<{
    labelAlign?: "flex-start" | "center" | "flex-end";
  }>(),
  {
    labelAlign: "flex-end",
  }
);

defineOptions({
  name: "dashed-line",
});

const active = defineModel({ type: String, default: ColdRiskLevelEnum.LOW });

const activeLabel = computed(() => {
  const temp = options.find((item) => item.value === active.value);
  return temp ? temp.label : "--";
});
</script>

<style lang="less">
.dashed-line {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  &__content {
    flex: 1;
    width: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 8px;
  }
  &__label {
    font-weight: 400;
    font-size: 24px;
    color: #8b8b8b;
  }
  &__item {
    position: relative;
    flex: 1;
    &-arrow {
      position: relative;
      &-item {
        position: absolute;
        transform: translate(-50%, 0);
        left: 50%;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 0 solid transparent;
        border-top: 10px solid #d8d8d8;
      }
    }
    &-progress {
      margin-top: 14px;
      background: #d8d8d8;
      border-radius: 8px;
      height: 8px;
      margin-bottom: 8px;
      &.is-active {
        background: var(--color);
      }
    }
  }
}
</style>
